<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { middleSegmentHeight } from '@/utils/lib'
import { client } from '@/utils/http'
import { useQuery } from '@tanstack/vue-query'
import useFilterStore from '@/stores/filter'
import { storeToRefs } from 'pinia'
import { toPercent, toThousand } from '@/utils/filter'
import useResize from '@/hook/resize'
import type { CarouselRef } from 'ant-design-vue/es/carousel'
import useCarousel from '@/hook/carousel'

interface Info {
  name: string
  id: number
  clue1FolowRate: string
  showTip: boolean
}

const { isFullScreen } = useResize()

const filterStore = useFilterStore()

const { ymdId, consultantListUpdateNum, checkDataUpdateNum } = storeToRefs(filterStore)

const carouselRef = ref<CarouselRef>()

const containerRef = ref<HTMLDivElement>()

useCarousel(containerRef, carouselRef, () => {})

const { data, isFetching } = useQuery<{
  overview: {
    clue24FolowRate: string
    clueValidRate: string
    etlDt: string
    clueQty: number
    clue1FolowRate: string
  }
  info: Info[]
}>({
  keepPreviousData: true,
  queryKey: ['/saleCoreBoard/getSaleClue', ymdId, consultantListUpdateNum, checkDataUpdateNum],
  queryFn: () => client('/saleCoreBoard/getSaleClue', { ymdId: ymdId.value }),
  enabled: computed(() => !!ymdId.value)
})

const overviewDatas = computed(() => {
  if (!data.value || !data.value.overview) {
    return []
  }
  const { overview } = data.value
  const { clue24FolowRate, clueValidRate, clueQty, clue1FolowRate } = overview
  return [
    {
      label: '线上线索',
      value: toThousand(clueQty),
      leads: '有效线索占',
      leadsPercent: toPercent(clueValidRate, 1, false, '%', 1)
    },
    {
      label: '1小时跟进率',
      value: toPercent(clue1FolowRate, 1, false, '%', 1)
    },
    {
      label: '24小时跟进率',
      value: toPercent(clue24FolowRate, 1, false, '%', 1)
    }
  ]
})

const progressDatas2D = ref<Info[][]>([])

watch(data, () => {
  if (!data.value || !data.value.info) {
    return []
  }
  const datas2D: {
    name: string
    id: number
    clue1FolowRate: string
    showTip: boolean
  }[][] = []
  let datas: {
    name: string
    id: number
    clue1FolowRate: string
    showTip: boolean
  }[] = []
  for (let index = 0; index < data.value.info.length; index++) {
    if (index % 6 === 0) {
      datas = []
      datas2D.push(datas)
    }
    datas.push({
      ...data.value.info[index],
      showTip: false
    })
  }
  progressDatas2D.value = datas2D
})

watch(
  progressDatas2D,
  () => {
    console.log('progressDatas2D', progressDatas2D.value)
  },
  { deep: true }
)
</script>

<template>
  <Segment
    :height="middleSegmentHeight"
    title="销售线索"
    :right="`数据截止日期: ${data?.overview?.etlDt || ''}`"
    :loading="isFetching"
  >
    <div class="sales-leads" :class="{ fullscreen: isFullScreen }">
      <div class="overview">
        <div class="item-values" v-for="overview in overviewDatas" :key="overview.label">
          <div class="label">{{ overview.label }}</div>
          <div class="value">{{ overview.value }}</div>
          <div class="leads-percent">
            <div class="leads">{{ overview.leads }}</div>
            <div class="percent">{{ overview.leadsPercent }}</div>
          </div>
        </div>
      </div>
      <div ref="containerRef" class="progress-container">
        <div class="label-value">
          <div class="label">1小时跟进率异常表现</div>
          <div class="value">（100%为正常）</div>
        </div>
        <a-carousel
          v-if="progressDatas2D.length"
          ref="carouselRef"
          arrows
          :autoplay="true"
          :autoplaySpeed="5000"
          :dots="false"
        >
          <template #prevArrow>
            <SvgIcon class="arrow-left" name="order-chart-slider-left" :size="16" />
          </template>
          <template #nextArrow>
            <SvgIcon class="arrow-right" name="order-chart-slider-right" :size="16" />
          </template>
          <div class="item" v-for="(items, index) in progressDatas2D" :key="index">
            <div class="label-progress-container">
              <div class="label-progress" v-for="progress in items" :key="progress.id">
                <div class="label">{{ progress.name }}</div>
                <div class="progress-bg">
                  <div
                    class="tip"
                    :style="{
                      background:
                        Number(progress.clue1FolowRate) >= 100
                          ? 'linear-gradient(270deg, #0dd3ff 0%, #009a94 100%)'
                          : 'linear-gradient(270deg, #ff8a00 0%, #ff3d00 100%)'
                    }"
                  >
                    {{
                      `${progress.name}: ${toPercent(progress.clue1FolowRate, 1, false, '%', 1)}`
                    }}
                  </div>
                  <div
                    class="progress"
                    :class="{ normal: Number(progress.clue1FolowRate) >= 100 }"
                    :style="{
                      width: `${
                        Number(progress.clue1FolowRate) > 100 ? 100 : progress.clue1FolowRate
                      }%`
                    }"
                  />
                </div>
              </div>
            </div>
          </div>
        </a-carousel>
      </div>
    </div>
  </Segment>
</template>
<style lang="less">
.progress-tip {
  .ant-tooltip-arrow {
    display: none;
  }
}
</style>
<style lang="less" scoped>
.sales-leads {
  padding: 8px 16px 12px;
  display: flex;
  flex-direction: column;
  height: calc(100% - 32px);
  &.fullscreen {
    .leads-percent {
      position: none;
      color: red;
    }
  }
  .overview {
    height: 54px;
    margin-bottom: 2px;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    .item-values {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .label {
        color: var(--unnamed, #fff);
        font-family: Alibaba PuHuiTi 2;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 14px; /* 100% */
      }
      .value {
        color: #fff;
        font-family: DIN Alternate;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
      }
      .leads-percent {
        white-space: nowrap;
        position: absolute;
        bottom: -16px;
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: Alibaba PuHuiTi 2;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px; /* 133.333% */
        .leads {
          color: #799bc0;
        }
        .percent {
          color: var(--01, #35c08e);
        }
      }
    }
  }
  .progress-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    .label-value {
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: Alibaba PuHuiTi 2;
      font-size: 14px;
      font-style: normal;
      line-height: 16px;
      .label {
        color: #d5e9ff;
        font-weight: 600;
      }
      .value {
        color: rgba(213, 233, 255, 0.8);
        font-weight: 400;
      }
    }
    :deep(.ant-carousel) {
      flex: 1;
      height: 100%;
      .slick-slider {
        height: 100%;
        .slick-list {
          height: 100%;
          overflow: visible;
          .slick-track {
            height: 100%;
            .slick-slide {
              height: 100%;
              & > div {
                height: 100%;
              }
            }
          }
        }
      }
    }
    .arrow-left {
      left: 0px;
      z-index: 9;
    }
    .arrow-right {
      right: 0px;
      z-index: 9;
    }
    .item {
      height: 100%;
      padding: 0 26px;
      .label-progress-container {
        height: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
        .label-progress {
          width: calc(50% - 12px);
          display: flex;
          align-items: center;
          gap: 8px;
          .label {
            white-space: nowrap;
            color: #799bc0;
            font-family: Alibaba PuHuiTi 2;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 14px; /* 116.667% */
          }
          .progress-bg {
            position: relative;
            height: 8px;
            width: 100%;
            background: rgba(227, 236, 255, 0.1);
            .tip {
              position: absolute;
              z-index: 99;
              display: none;
              padding: 4px 6px;
              border-radius: 4px;
              bottom: 14px;
              left: 50%;
              transform: translateX(-50%);
              white-space: nowrap;
              color: #fff;
              font-family: Alibaba PuHuiTi 2;
              font-size: 12px;
              font-style: normal;
              font-weight: 400;
              line-height: 14px; /* 116.667% */
            }
            &:hover {
              .tip {
                display: block;
              }
            }
            .progress {
              position: absolute;
              left: 0;
              top: 0;
              bottom: 0;
              height: 8px;
              background: linear-gradient(270deg, #ff8a00 0%, #ff3d00 100%);
              &.normal {
                background: linear-gradient(270deg, #0dd3ff 0%, #009a94 100%);
              }
            }
          }
        }
      }
    }
  }
}
</style>
